<script setup lang="ts">
// 引入 Vue 的 Composition API
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
// 引入 echarts 库
import * as echarts from 'echarts'

// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance: echarts.ECharts | null = null

// 初始化雷达图的方法
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value)

    // 配置项
    const option = {
      color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
      title: {
        text: 'Customized Radar Chart',
        left: 'center'
      },
      legend: {
        data: ['Data A', 'Data B'],
        left: 'center',
        top: 30
      },
      radar: [
        {
          indicator: [
            { text: 'Indicator1' },
            { text: 'Indicator2' },
            { text: 'Indicator3' },
            { text: 'Indicator4' },
            { text: 'Indicator5' }
          ],
          center: ['50%', '60%'], // 调整中心位置以适应容器
          radius: '60%', // 使用百分比适配容器
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          axisName: {
            formatter: '【{value}】',
            color: '#428BD4'
          },
          splitArea: {
            areaStyle: {
              color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          }
        }
      ],
      series: [
        {
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          data: [
            {
              value: [100, 8, 0.4, -80, 2000],
              name: 'Data A'
            },
            {
              value: [60, 5, 0.3, -100, 1500],
              name: 'Data B',
              areaStyle: {
                color: 'rgba(255, 228, 52, 0.6)'
              }
            }
          ]
        }
      ]
    }

    // 使用配置项渲染图表
    chartInstance.setOption(option)
  }
}

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize({
      animation: {
        duration: 300
      }
    })
  }
}

// 组件挂载后执行初始化
onMounted(() => {
  nextTick(() => {
    initChart()
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener('resize', resizeChart)
  })
})

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance?.dispose() // 销毁 echarts 实例
})
</script>

<template>
  <div class="radar-chart">
    <!-- 图表容器 -->
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<style scoped>
.radar-chart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
